<template>
	<div class="recommend-store-main">
		<div class="guidance fix" :class="guidance">
			<img class="guidanceclose fl" src="../assets/image/×@2x.png" @click="guidanceclose">
			<img class="guidancelogo fl" src="../assets/image/logo@2x.png">
			<div class="guidancewords fl"><p>搭搭秀</p><span>注册即送1000元等额现金！</span></div>
			<router-link to="/download" class="guidancedownload fr">立即下载</router-link>
		</div>
		<div class="storebar" :style="storebar">
			<div class="store-banner">
				<img class="store-bannerimg" src="../assets/image/temporary/bg@2x.png">
				<div :class="[{scrollStatus: scrollFlag},'searchWrap']" :style="searchWrap2">
					<router-link to="">
						<div class="searchbar clear">
							<img src="../assets/image/ico_seach@2x.png" class="search-icon fl"/>
							<input type="text" placeholder="请输入搜索关键词" class="search-text fl">
						</div>
					</router-link>
				</div>
				<div class="store-msg clear">
					<div class="store-logo fl"><img :src="storeContent.storeInfo ? storeContent.storeInfo.storeImg : ''"/></div>
					<p class="store-name fl">{{storeContent.storeInfo ? storeContent.storeInfo.storeName : ''}}</p>
				</div>
				<div class="collect-icon">
					<img src="../assets/image/collect2@2x.png" v-if="collect == 0" @click="isCollect()"/>
					<img src="../assets/image/have_collect@2x.png" v-if="collect == 1" @click="noCollect()"/>
				</div>
			</div>
			<div class="store-add">
				<router-link to="" class="clear">
					<img src="../assets/image/ico_location3@2x.png" class="location-icon fl"/>
					<p class="location-text fl">{{storeContent.storeInfo ? storeContent.storeInfo.address : ''}}</p>
					<img src="../assets/image/ico_leave-for@2x.png" class="to-add fr"/>
				</router-link>
			</div>
		</div>
		<nav class="navbar clear" v-show="scrollFlag">
			<div class="fl"><a href="javascript:;"><p @click='tabToggle("typeA", "#new-pro");' :class="{active : (type == 'typeA')}">新品</p></a></div>
			<div class="fl"><a href="javascript:;"><p @click='tabToggle("typeB", "#reco-pro");' :class="{active : (type == 'typeB')}">推荐</p></a></div>
			<div class="fl"><a href="javascript:;"><p @click='tabToggle("typeC", "#all-pro");' :class="{active : (type == 'typeC')}">全部</p></a></div>
		</nav>
		<div class="productbar">
			<div id="new-pro">
				<div class="headbar">
					<div class="chinese-head clear"><span class="fl"></span><p class="fl">新品推荐</p><span class="fl"></span></div>
					<p class="english-head">NEW PRODUCTS</p>
					<ul class="product-list clear">
						<li class="product-item fl" v-for="item in storeContent.goodsNew">
							<router-link :to='{path: "commodityDetail", query: {spu: item.spu}}'>
								<img :src="item.imageUrl" class="product-img"/>
								<p class="product-name">{{item.goodsName}}</p>
								<p class="product-price">￥{{item.shopPrice}}</p>
							</router-link>
						</li>
					</ul>
				</div>
			</div>
			<div id="reco-pro">
				<div class="headbar">
					<div class="chinese-head clear"><span class="fl"></span><p class="fl">热门推荐</p><span class="fl"></span></div>
					<p class="english-head">HOT RECOMMEND</p>
					<ul class="product-list clear">
						<li class="product-item fl" v-for="item in storeContent.recommend">
							<router-link :to='{path: "commodityDetail", query: {spu: item.spu}}'>
								<img :src="item.imageUrl" class="product-img"/>
								<p class="product-name">{{item.goodsName}}</p>
								<p class="product-price">￥{{item.shopPrice}}</p>
							</router-link>
						</li>
					</ul>
				</div>
			</div>
			<div id="all-pro">
				<div class="headbar">
					<div class="chinese-head clear"><span class="fl"></span><p class="fl">全部</p><span class="fl"></span></div>
					<p class="english-head">ENTIRE</p>
					<ul class="product-list clear">
						<li class="product-item fl" v-for="item in storeAllLi.rows">
							<router-link :to='{path: "commodityDetail", query: {spu: item.spu}}'>
								<img :src="item.imageUrl" class="product-img"/>
								<p class="product-name">{{item.goodsName}}</p>
								<p class="product-price">￥{{item.shopPrice}}</p>
							</router-link>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<login :isCenter='false'></login>
		<cfooter pageType='recommendStore'></cfooter>
	</div>
</template>
<script>
import Vue from 'vue'
import login from './login'
import cfooter from '../components/footer'

export default {
	data () {
		return {
			guidance: '',
			storebar: '',
			searchWrap2: '',
			storeContent: '',
			storeAllLi: '',
			productList: '',
			pageCount: '',
			currentPage: '',
			type: 'typeA',
			collect: '',
			scrollFlag: false,
			token: '',
			storeID: '51',
			pageNo: '1'
		}
	},
	name: 'app',
	components: {
		login,
		cfooter
	},
	created(){
		let storeId = this.$route.query.storeID
		this.storeID = storeId ? storeId : this.storeID;
	},
	mounted:function () {
		this.$nextTick(function () {
			this.getLocalStorage();
			this.storeView();
			window.addEventListener('scroll', this.onScroll);
			window.addEventListener('scroll', this.loadMore);
			if(this.$route.query.storeID != null){
				this.guidance = 'hidden';
				this.storebar = 'padding: 0'
				this.searchWrap2 = 'top: 0'
			}
		})
	},
	methods:{
		guidanceclose:function () {
			this.guidance = 'hidden';
			this.storebar = 'padding: 0'
			this.searchWrap2 = 'top: 0'
		},
		getLocalStorage:function () {
			this.token = (window.localStorage.getItem('token') || '[]');
		},
		storeView:function () {
			var _this = this;
			// 获取门店信息
			this.$http.post(Util.ajaxPath.devProductUrl+'shop-mms/mms/store/storeInfo',{storeID: this.storeID}, {emulateJSON:true}).then(function (res) {
				_this.storeContent = res.body.content;
			});
			// 获取门店所有商品
			this.$http.get(Util.ajaxPath.devProductUrl+"shop-mms/mms/store/storeGoods/"+this.storeID+"/"+this.pageNo).then(function (res) {
				_this.storeAllLi = res.body.content;
				_this.productList = _this.storeAllLi.rows;
				_this.pageCount = _this.storeAllLi.pageCount;
				_this.currentPage = _this.storeAllLi.currentPage;
			});
			// 收藏显示已收藏
			this.$http.post(Util.ajaxPath.devProductUrl+'shop-mms/mms/store/follow',{token: this.token,storeID: this.storeID}, {emulateJSON:true}).then(function (res) {
				_this.code = res.body.code;
				console.log(this.token);
				console.log(_this.code);
				if(_this.code = 15001){
					_this.collect = '1';
				}
			});
		},
		tabToggle:function(tabText, elem){
			this.type= tabText;
			let anchor = this.$el.querySelector(elem);
			document.body.scrollTop = anchor.offsetTop-90;
		},
		isCollect:function () {
			var _this = this;
			this.$http.post(Util.ajaxPath.devProductUrl+'shop-mms/mms/store/follow',{token: this.token,storeID: this.storeID}, {emulateJSON:true}).then(function (res) {
				_this.code = res.body.content.code;
				if(_this.code = 15000){
					_this.collect = '1';
				}
			});
		},
		noCollect:function () {
			var _this = this;
			this.$http.post(Util.ajaxPath.devProductUrl+'shop-mms/mms/me/deleteStoreFollow',{token: this.token,storeID: this.storeID}, {emulateJSON:true}).then(function (res) {
				_this.code = res.body.content.code;
				if(_this.code = 13000){
					_this.collect = '0';
				}
			});
		},
		onScroll:function () {
			var _this= this;
			var scrolled = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
			var conHeight = (document.documentElement.clientHeight)*(this.currentPage) - 100;
			if(scrolled > 70){
				_this.scrollFlag = true;
			}else{
				_this.scrollFlag = false;
			}
		},
		loadMore:function () {
			var _this= this;
			var scrolled = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
			var conHeight = (document.documentElement.clientHeight)*(this.currentPage);
			if(scrolled > conHeight && this.currentPage < this.pageCount){
				_this.currentPage++;
					// 获取门店所有商品
					this.$http.get(Util.ajaxPath.devProductUrl+"shop-mms/mms/store/storeGoods/"+_this.storeID+"/"+_this.currentPage).then(function (res) {
					for(var i=0; i<res.body.content.rows.length; i++){
						_this.productList.push(res.body.content.rows[i]);
					}
				});
			}
		}
	},
}
</script>
<style lang="scss" scope>
.recommend-store-main{
	padding-bottom: .88rem;
	background: #fff;

	.guidance{
		width: 100%; height: 0.88rem; background: rgba(51,51,51,.9); position: fixed; top: 0; left: 0; z-index: 19;
		.guidanceclose{ display: block; padding: 0.34rem 0.24rem 0; width: 0.21rem; height: 0.21rem; }
		.guidancelogo{ display: block; padding-top: 0.11rem; width: 0.66rem; height: 0.66rem; }
		.guidancewords{
			padding-left: 0.2rem;
			p{ padding-top: 0.18rem; line-height: 0.24rem; font-size: 0.24rem; color: #fff; }
			span{ display: block; padding-top: 0.11rem; line-height: 0.2rem; font-size: 0.2rem; color: #fff; }
		}
		.guidancedownload{ display: block; margin: 0.21rem 0.38rem 0 0; width: 1.2rem; height: 0.46rem; line-height: 0.46rem; text-align: center; font-size: 0.22rem; color: #fff; background: #ff365d; border-radius: 0.23rem; }
	}
	.storebar{
		padding-top: 0.88rem; width: 100%;
		.store-banner{
			width: 100%; height: 2.38rem; position: relative;
			.store-bannerimg{ display: block; width: 100%; height: 2.38rem; }
		}
	}
	.searchWrap{
		padding:0.14rem 0.3rem; position: fixed; top: 0.88rem; left: 0; z-index: 19;
		a{ display: block; width: 6.9rem; height: 0.6rem;}
		.searchbar{
			width:6.9rem; height:0.6rem; border-radius:29px; background:rgba(243,243,243,.7);
			.search-icon{ display:block; width:0.28rem; height:0.28rem; padding:0.16rem 0.11rem 0 0.21rem;}
			.search-text{ display:block; width:4.5rem; height:0.22rem; margin-top:0.19rem; border:0; outline:none; font-size:0.22rem; line-height:0.22rem; color:#aaa; background:none;}
			::-webkit-input-placeholder{ color:#aaa; font-size: 0.22rem; line-height:0.22rem; text-align:left;}
		}
	}
	.scrollStatus{
		background: #f3f3f3;
		.searchbar { background: #fff; }
	}
	.store-msg{
		position: absolute; top: 1.66rem; left: 0.35rem;
		.store-logo{
			width: 1.3rem; height: 1.3rem;border: 1px solid #f0f0f0;
			img{ display: block; width: 1.3rem; height: 1.3rem; }
		}
		.store-name{ padding: 0.21rem 0 0 0.24rem; width: 4rem; font-size: 0.28rem; line-height: 0.28rem; color: #151517; overflow: hidden; }
	}
	.collect-icon{
		position:absolute; right:0.3rem; bottom:0.28rem; width:1.12rem; height:0.48rem;
		img{width:1.12rem; height: 0.48rem;}
	}
	.store-add{
		width: 100%; height: 0.82rem; border-bottom: 0.2rem solid #f4f5f5; background: #fff;
		a{display: block; width: 100%; height: 0.82rem;}
		.location-icon{display: block; width: 0.36rem; height: 0.36rem; padding: 0.23rem 0.08rem 0.23rem 1.84rem;}
		.location-text{width:4.52rem; font-size: 0.26rem; line-height: 0.82rem; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; color: #666;}
		.to-add{display: block; width:0.3rem; height: 0.3rem; padding: 0.26rem 0.24rem 0.26rem 0;}
	}
	.navbar{
		width: 100%; height: 0.88rem; border-bottom: 0.02rem solid #f1f1f1; background: #fff; position:fixed; left:0; top:0.88rem;
		div{ width: calc(100%/3); height: 0.88rem;}
		a{display: block; width: 0.68rem; height: 0.88rem; margin: 0 auto;}
		p{width: 0.68rem; height: 0.86rem; font-size: 0.3rem; text-align: center; line-height: 0.86rem; color: #333;}
		.active{border-bottom:0.02rem solid #ff365d; color: #ff365d;}
	}
	.productbar{width:100%; height:100%; background: #fff;}
	#new-pro{ width: 100%; height: 100%;}
	.headbar{
		width:100%;
		.chinese-head{
			width:2.3rem; height:0.32rem; margin:0 auto; padding:0.34rem 0 0.12rem;
			span{width: 0.3rem; height: 0.02rem; margin: 0.15rem 0; background: #333;}
			p{margin: 0 0.2rem; width:1.28rem; font-size: 0.32rem; text-align: center; line-height: 0.32rem; color: #333;}
		}
		.english-head{
			width: 2.42rem; height: 0.22rem; margin: 0 auto 0.52rem; font-size: 0.22rem; text-align: center; line-height: 0.22rem; color: #999;
		}
	}
	.product-list{padding: 0 0.1rem;}
	.product-item{
		width: 3.3rem; height: 5.4rem; margin: 0 0.15rem 0.3rem 0.15rem; border:1px solid #f0f0f0;
		.product-img{display: block; width: 3.3rem; height: 3.3rem;}
		.product-name{margin:0.27rem 0.54rem 0.36rem 0.3rem; font-size: 0.28rem; line-height: 0.42rem; color: #3e3e3e; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all;}
		.product-price{padding:0 0.3rem; font-size: 0.32rem; color: #ff365d;}
	}
}
</style>